<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form inline size="small">
        <el-form-item label="所属代理商">
          <el-input v-model="search.agent_name"></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input v-model="search.store"></el-input>
        </el-form-item>
        <el-form-item label="报单编号">
          <el-input v-model="search.serial_num"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="search.status" clearable placeholder="全部">
            <el-option :value="100" label="申请中"></el-option>
            <el-option :value="110" label="入驻中"></el-option>
            <el-option :value="120" label="入驻成功"></el-option>
            <el-option :value="200" label="报名中"></el-option>
            <el-option :value="300" label="报名成功"></el-option>
            <el-option :value="400" label="已成功"></el-option>
            <el-option :value="500" label="未通过"></el-option>
          </el-select>
        </el-form-item>
        <el-button icon="el-icon-search" type="success" size="small" @click="handleClickSearch">查询</el-button>
      </el-form>
    </el-row>
    <el-row>
      <el-table size="small" :data="date">
        <el-table-column align="center" label="序号" width="55" type="index"></el-table-column>
        <el-table-column align="center" label="报单编号" prop="serial_num"></el-table-column>
        <el-table-column align="center" label="公司名称" prop="store"></el-table-column>
        <el-table-column align="center" label="公司地址" prop="real_address"></el-table-column>
        <el-table-column align="center" label="所属代理商" prop="agent_name"></el-table-column>
        <el-table-column align="center" label="申请时间" prop="updated_at"></el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span>{{ scope.row.apply_status === 100 ? '申请中' : scope.row.apply_status === 110 ? '入驻中' : scope.row.apply_status === 120 ? '入驻成功' : scope.row.apply_status === 200 ? '报名中' : scope.row.apply_status === 300 ? '报名成功' : scope.row.apply_status === 400 ? '已成功' : scope.row.apply_status === 500 ? '未通过' : '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickRouterTo(scope.row.id)">审核查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination class="fr mt-10" layout="total, prev, pager, next, jumper" :total="page.total" :current-page.sync="page.current" :page-size="page.size" @current-change="handleCurrentChage"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { tableInit, tableSearch, tablePage } from '@/api/action'

export default {
  name: 'blueOeance',
  components: {
    Breadcrumb
  },
  data() {
    return {
      page: {
        total: 0,
        size: 1,
        current: 1
      },
      search: {
        agent_name: '',
        store: '',
        serial_num: '',
        status: ''
      },
      date: []
    }
  },
  methods: {
    handleTableInit() {
      tableInit(this.id).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.total = res.data.result.total
          this.page.size = res.data.result.per_page
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleCurrentChage(v) {
      tablePage(this.id, this.search, v).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.current = res.data.result.current_page
          this.page.size = res.data.result.per_page
          this.page.total = res.data.result.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickRouterTo(id) {
      this.$router.push({ name: 'validateAction', query: { id }})
    },
    handleClickSearch() {
      tableSearch(this.id, this.search).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.page.total = res.data.result.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.handleTableInit()
  }
}
</script>

<style>

</style>
